<script setup lang="tsx">
import { Form, FormSchema } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { watch, inject, reactive, Ref } from 'vue'
import { Row } from '@/api/logistics/waybill'
import tableData from './tableData.vue'
const emit = defineEmits(['close', 'get-list'])
const currentRow: Ref<Row> = inject('currentRow') as Ref<Row>
const { formRegister, formMethods } = useForm()
const { setValues } = formMethods

const schema = reactive<FormSchema[]>([
  {
    field: '',
    label: '基础信息',
    component: 'Divider',
    colProps: { span: 28 },
    componentProps: {
      borderStyle: 'none',
      contentPosition: 'left'
    }
  },
  {
    field: 'no',
    label: '运单编号',
    component: 'Input',
    componentProps: {
      disabled: true
    }
  },
  {
    field: 'deliver_line_no',
    label: '运输路线编号',
    component: 'Input',
    componentProps: {
      disabled: true
    }
  },
  {
    field: 'task_status_text',
    label: '物流状态',
    component: 'Input',
    componentProps: {
      disabled: true
    }
  },
  {
    field: 'deliver_driver_name',
    label: '配送司机',
    component: 'Input',
    componentProps: {
      disabled: true
    }
  },
  {
    field: 'deliver_car_no',
    label: '配送车辆',
    component: 'Input',
    componentProps: {
      disabled: true
    }
  },
  {
    field: 'start_time',
    label: '开始配送时间',
    component: 'Input',
    componentProps: {
      disabled: true
    }
  },
  {
    field: 'end_time',
    label: '配送完成时间',
    component: 'Input',
    componentProps: {
      disabled: true
    }
  },
  {
    field: 'income',
    label: '配送收益（元）',
    component: 'Input',
    componentProps: {
      disabled: true
    }
  },
  {
    field: '',
    label: '订单信息',
    component: 'Divider',
    colProps: { span: 28 },
    componentProps: {
      borderStyle: 'none',
      contentPosition: 'left'
    }
  }
])

watch(
  () => currentRow.value,
  (currentRow) => {
    if (!currentRow) return
    setValues(currentRow)
  },
  {
    deep: true,
    immediate: true
  }
)
</script>

<template>
  <ContentDetailWrap title="运单详情">
    <Form @register="formRegister" :schema="schema" />
    <tableData :currentRow="currentRow" />
    <template #footer>
      <div class="w-full flex items-center justify-center">
        <BaseButton @click="emit('close')">返回</BaseButton>
      </div>
    </template>
  </ContentDetailWrap>
</template>
